// 为了实现动态的赋值，需要通过 js 实现对 root 的变量添加
import { localForage } from '../../localforage';
// 引入 AntDesign 的主题样式
import dark from '../../style/theme/dark';
import light from '../../style/theme/light';

type AntDesignTheme = typeof dark.token | typeof light.token;

/**
 * 设置主题
 * @param theme - dark | light | system
 */
function setTheme(theme: string) {
	addRootVariable(theme);

	// 触发 theme-change 事件
	document.dispatchEvent(
		new CustomEvent('theme-change', { bubbles: false, detail: { theme } })
	);

	// 存储到 localStorage 中
	localForage.setItem('theme', theme);
}

function addRootVariable(theme: string) {
	// 动态创建 style 标签，内容指向 css 文件
	let style = document.querySelector('style#ec-theme');

	// 如果已经存在，则先删除
	if (style) style.remove();

	// 创建 link 标签
	style = document.createElement('style');
	style.setAttribute('id', 'ec-theme');

	/**
	 * 这里判断是 light dark 还是 system
	 *  system 的处理方式： let media = window.matchMedia('(prefers-color-scheme:dark)');
	 */
	if (theme === 'system') {
		const media = window.matchMedia('(prefers-color-scheme:dark)');
		if (media.matches) style.innerHTML = cssToString(dark.token);
		else style.innerHTML = cssToString(light.token);
	} else if (theme === 'dark') {
		style.innerHTML = cssToString(dark.token);
	} else {
		style.innerHTML = cssToString(light.token);
	}

	// 添加到 head 中
	document.head.appendChild(style);
}

// 工具函数 - 将 对象结构的 css 转换为字符串
function cssToString(css: AntDesignTheme) {
	return `:root {${Object.keys(css).reduce((prev, key) => {
		return prev + `--${key}: ${css[<keyof AntDesignTheme>key]};`;
	}, '')}}`;
}

export { setTheme,addRootVariable };
